<template>
  <div class="app-container">
    <div class="page-title">图片管理模式可以追溯图片来源，建议使用这种方式</div>
    <div>
      <div class="title">默认状态（可拖拽排序）</div>
      <ImgList v-model="form.imgUrl1"></ImgList>
    </div>
    <hr>
    <div>
      <div class="title">不同尺寸展示</div>
      <ImgList v-model="form.imgUrl2" runType="arrayStr" imgStyle="width: 200px; height: 100px" hint="建议尺寸：宽:200px；高:100px" ></ImgList>
    </div>
    <hr>
    <div>
      <div class="title">不同数据格式（限制选择图片数量）</div>
      <ImgList v-model="form.imgUrl3" runType="arrayObj" :selectNum="3" imgStyle="width: 200px; height: 100px" hint="建议尺寸：宽:200px；高:100px" ></ImgList>
    </div>
    <hr>
    <div>
      <div class="title">直接通过按钮调起弹窗</div>
      <el-button type="primary" @click="showImgDialog">打开图片管理弹窗</el-button>
    </div>
    <ImgIndex v-model="form.imgUrl4" ref="ImgIndexRef" @imgAdminRes="imgAdminRes"></ImgIndex>
  </div>
</template>

<script setup>
  import ImgList from "@/components/imgAdmin/imgList.vue";
  import ImgIndex from "@/components/imgAdmin/index.vue";
  const {proxy}=getCurrentInstance();
  const form=reactive({
    imgUrl1:"",
    imgUrl2:[],
    imgUrl3:[],
    imgUrl4:[],
  });
  function showImgDialog(){
    proxy.$refs.ImgIndexRef.showOpen();
    //会自动更新form.imgUrl4参数，(可通过打印查看数据变化)
  }
  function imgAdminRes(res){
    console.log(res);
    console.log(form.imgUrl4);
    proxy.$modal.msgSuccess("打开F12查看选择的图片数据");
  }
</script>

<style scoped lang="scss">
  .page-title{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }
  .title{
    font-size: 18px;
    margin: 20px 0;
  }
</style>
